<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useMemberStore } from '@/stores'
import { getUserCashAmountAPI, postLoginWxMinAPI, postUserCashApproveAPI } from '@/api/account'
import type { userItem } from '@/types/member'

const memberStore = useMemberStore()
const drawalValue = ref('')
const profile = ref<userItem>({})
  import {baseURL} from "@/utils/http";

// 获取个人信息
const getMemberProfileData = async () => {
  // 获取微信code
  const rescode = await wx.login()
  const { code } = rescode

  // 发起请求
  const loginrRes = await postLoginWxMinAPI(code)

  // const res = await getUserInfoByIdAPI(memberStore.profile.userId)
  memberStore.setProfile(loginrRes.data.appUser)
  profile.value = memberStore.profile
  if (profile.value.avatar?.includes('http')) {
    console.log(profile)
  } else {
    profile.value.avatar = baseURL + profile.value.avatar
  }
}

// 待提现金额
const cashAmout = ref()
const getUserCashAmount = async () => {
  if (profile.value.userId) {
    const res = await getUserCashAmountAPI(profile.value.userId)
    cashAmout.value = res.data as string
  }
}

onMounted( async () => {
  await getMemberProfileData()
  getUserCashAmount()

})

const drawaAll = () => {
  drawalValue.value = cashAmout.value
}

// 发起提现
const drawalHeadel = async () => {
  if (profile.value.userId && profile.value.wxOpenid) {
    if (drawalValue.value != '') {
      const res = await postUserCashApproveAPI(
        profile.value.userId,
        drawalValue.value,
        profile.value.wxOpenid,
      )
      drawalValue.value = ''
      uni.showToast({ icon: 'none', title: res.data as string })
    } else {
      uni.showToast({ icon: 'fail', title: '清输入提现金额' })
    }
  } else {
    uni.showToast({ icon: 'fail', title: '请登录！' })
  }
}
</script>

<template>
  <view class="viewport">
    <view class="profile">
      <image :src="profile.avatar" mode="scaleToFill" />
      <view class="nick_name">{{ profile.name }}</view>
    </view>
    <view class="drawal">
      <view class="title">提现金额</view>
      <view class="drawal_input">
        <text>¥</text>
        <uni-easyinput v-model="drawalValue" placeholder="请输入" />
      </view>
      <view class="note">
        <view class="top">当前可提现金额为：<text>{{ cashAmout }}</text>元，</view>
        <view class="all_take" @tap="drawaAll">全部提现</view>
      </view>
      <view class="waring">提现到当前微信登陆账号，请注意到账查收</view>
    </view>
    <view class="btn">
      <button
        type="primary"
        style="color: #ffffff; backgroundcolor: #27ba9b; bordercolor: #27ba9b"
        size="default"
        @tap="drawalHeadel"
      >
        提现
      </button>
    </view>
    <view class="some">
      <text>提现门框为：0元</text>
      <text>提现手续费：0%</text>
      <text>本次提现扣除手续费：0.0元</text>
      <text>本次提现实际到账金额：5.00元</text>
    </view>
  </view>
</template>

<style lang="scss">
page {
  background-color: #fff;
}
.viewport {
  margin: 10px;
}
.profile {
  background-color: #fff;
  padding: 10px 10px 15px;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eee;

  image {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    margin-right: 15px;
  }
}

.btn {
  padding: 20px;
  width: 100%;
  button {
    font-size: 16px;
    line-height: 2.6;
    width: 250px;
  }
}

.drawal {
  padding: 10px;
  .title {
    font-size: 30rpx;
    color: #333;
  }
  .drawal_input {
    display: flex;
    align-items: center;
    margin: 10px 0;

    text {
      font-size: 20px;
      color: #333;
      margin-right: 10px;
    }
  }

  .note {
    display: flex;
    align-items: center;

    .top {
      font-size: 14px;
      color: #666;
      text {
        color: #27ba9b;
        font-size: 16px;
      }
    }
    .all_take {
      margin: 5px 0;
      color: #27ba9b;
      font-weight: bold;
    }
  }

  .waring {
    font-size: 24rpx;
    color: #999;
  }
}

.some {
  display: flex;
  flex-direction: column;
  line-height: 2em;
  font-size: 14px;
  color: #666;
  border-top: 1px solid #eee;
  padding-top: 10px;
}
</style>
